[element |
您所在的位置：网站首页 › Elementui checkbox选择文件 › [element |
[element
|
前言：
el-table其实自带多选功能，手动添加一个el-table-column，设type属性为selection，再绑定一个方法@selection-change="handleSelectionChange"即可拿到多选的数据。 但当涉及到接口分页以及勾选数据回显的时候，这个方法就不好用了。 以下介绍一种使用el-check来模拟el-table的勾选功能的写法。 效果图：
左右两边共用一份数据源selectedData，同步添加和删除，保证表格翻页（调后端接口）也能实现回显效果 实现思路： 1、写一个方法，来判断当前行数据有没有被勾选 如果是checkbox的点击事件中调用（不论是全选还是单选），则传一个参数type（因为是在for循环中，如果直接返回布尔值可能会阻断循环，这样就不能做全选的遍历了）。如果当前数据在已勾选数组中，则返回它的下标，如果不在则返回-1；如果是el-table中判断当前数据是否被勾选，第二个参数不必传。勾选了则返回true，没勾选返回false。 isExist(row, type) { for (let i in this.selectedData) { if (this.selectedData[i].id === row.id) { return type === 'index'? i : true } } return type === 'index'? -1 : false }, 2、写一个checkbox，定位到表头，代替全选框。绑定一个布尔值selectAll，默认为false，在每次调取列表接口的时候都重置为false值，保证获取新数据时都可以勾选（这里有个bug，这个值没有半选效果，也不能回显，因为要回显的话得反向判断这一页的每条数据时候是否都勾选上，比较麻烦） 全选事件selectAllChange的逻辑，遍历表格数据，在操作前先通过方法isExist（）返回的值来判断当前行是否勾选。如果点击了全选&&返回-1（代表没被勾选），即可添加到勾选数组中；如果取消了全选&&返回值不等于-1（被勾选上了），则在数组中删除此条数据 selectAllChange(val) { this.tableData.map(item => { let idx = this.isExist(item, 'index') if(val && idx === -1 && !item.type) { //只能添加未推广的宝贝 type=1已推广 if(this.selectedData.length >= this.canSelectNum) return false this.selectedData.push(item) } else if(!val && idx != -1) { this.selectedData.splice(idx, 1); } }) }, 3、表格第一列是勾选框，根据方法isExist（）返回的布尔值判断是否勾选。勾选事件selectChange的逻辑，在操作前先通过方法isExist（）返回的值来判断当前行是否勾选。如果是点击勾选&&返回-1，即可添加到勾选数组中；如果是取消勾选&&返回值不等于-1（被勾选上了），则在数组中删除此条数据 selectChange(val, row) { if(val && this.selectedData.length >= this.canSelectNum) return false let idx = this.isExist(row, 'index') if(val && idx === -1 && !row.type) { //只能添加未推广的宝贝 type=1已推广 this.selectedData.push(row) }else if(!val && idx != -1) { this.selectedData.splice(idx, 1); this.selectAll = false; } },以下是全部代码： // 写一个checkbox，定位到表头，代替全选框 // 第一列是勾选框，根据方法isExist返回的布尔值判断是否勾选{{ scope.row.title }} 宝贝ID：{{ scope.row.itemId }} 已推广 共 {{ total }} 条 |
【本文地址】
今日新闻 |
推荐新闻 |